<template>
  <div class="correspondence">
    <div class="chat-preview-container">
      <div class="chat-preview-header">
        <div class="chat-preview-header-title">{{ $t("New Messages")}}</div>
        <div class="dots">
        </div>
      </div>
      <div class="chat-preview-content"></div>
    </div>
    <div class="chat-middle">
      <ChatPanel v-if="profileId && customerId"
                 :type="type"
                 :profile-id="profileId" :customer-id="customerId" ref="ChatPanelRef"></ChatPanel>
    </div>
    <div class="chat-right">
      <div class="chat-right-top">
<!--        <el-select class="right-select" v-model="rightSelect">-->
<!--          <el-option v-for="item in options1" :value="item.value" :label="item.label"></el-option>-->
<!--        </el-select>-->
        <div class="tab" style="margin-bottom: 10px">
          <div @click="handleChangeListType(item.value)" v-for="item in options1" :key="item.value" :class="['tab-item', rightSelect === item.value ? 'active' : '']">
            {{ item.label }}
          </div>
        </div>
        <el-input
            v-if="rightSelect === 'All'"
            class="dark_input"
            :placeholder="$t('Search profile')"
            prefix-icon="el-icon-search"
            v-model="rightSearch">
        </el-input>
      </div>
      <UserListAll :search-value="rightSearch" ref="UserListAllRefs" v-if="rightSelect === 'All'" @change="handleChangeCustomer"/>
      <UserListHistory v-if="rightSelect === 'History'" @change="handleChangeCustomer"/>
    </div>

    <!--  边框sidebar  -->
    <side-cribs />
  </div>
</template>

<script>
// 所有用户列表
import UserListAll from './user-list-all.vue'
// 历史聊天记录
import UserListHistory from './user-list-history.vue'

import ChatPanel from "./chat-panel.vue";
import SideCribs from "@/views/correspondence/side-cribs.vue";
export default {
  name: 'correspondence',
  components: {
    SideCribs,
    UserListAll,
    UserListHistory,
    ChatPanel
  },
  data() {
    return {
      rightSelect: 'All',
      options1: [
        { value: 'All', label: this.$t('ALL')},
        { value: 'History', label: this.$t('History')},
      ],
      rightSearch: '',
      profileId: '',
      customerId: '',
      type: 'CHAT',
    }
  },
  mounted() {
  },
  methods: {
    getUnAnswered() {
      this.$http.getUnAnsweredMessage({
        contentTypes: [
          'AUDIO','COMMENT','VIRTUAL_GIFT_BATCH','PHOTO_BATCH','MESSAGE','HTML','PHOTO','STICKER','VIDEO','REAL_PRESENT'
        ]
      }).then(res => {
        console.log(res)
      })
    },
    handleChangeListType(value) {
      this.rightSelect = value
    },
    handleChangeCustomer({ profileId, customerId, type }) {
      this.type = type
      this.profileId = profileId
      this.customerId = customerId
      setTimeout(() => {
        this.$refs.ChatPanelRef.initData()
      },300)
    }
  }
}
</script>
<style lang="scss">
.correspondence {
  display: grid;
  grid-template-columns: 1fr 45vw 1fr;
  grid-gap: min(1rem,0.729vw);
  height: calc(100vh - min(4rem,2.917vw));
  padding: min(0.571rem,0.417vw) 0 min(1.786rem,1.302vw) 0;
  background-color: #0e222e;
  .chat-middle {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: min(0.857rem,0.625vw);
    border-radius: min(1.143rem,0.833vw);
    background: #122A3A;
    overflow: hidden;
  }
  .chat-right {
    display: flex;
    flex-direction: column;
    gap: min(1.143rem,0.833vw);
    padding:min(0.857rem,0.625vw);
    overflow: hidden;
    border-radius: 1.143rem;
    outline: 1px solid #3C6382;
    background-color: #122a3a;
    .right-select {
      width: 12.143rem;
      font-size: 1.071rem;
      font-weight: 400;
      margin-bottom: min(1.143rem,0.833vw);;

      .el-select__caret {
        color: #ffffff;
      }
      > .el-input--mini .el-input__inner {
        height: 3rem;
        background: #0E222E;
        color: #dfdfdf;
        border: none;
      }
    }
  }
  .tab {
    display: flex;
    align-items: center;
    border-radius: 0.571rem;
    justify-content: space-between;
    width: 100%;
    height: 2.286rem;
    background-color: #0e222e;
    text-align: center;
    margin-bottom: 0.2rem;
    .tab-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      height: 100%;
      cursor: pointer;
      &.active {
        background: #2B4353;
        color: #bdeaff;
        border-radius: 0.571rem;
      }
    }
  }
  .chat-preview-container {
    height: 100%;
    padding: min(1.143rem,0.833vw) 0 min(0.286rem,0.208vw) min(0.857rem,0.625vw);
    border-radius: 1.143rem;
    background-color: #122a3a;
    display: flex;
    flex-direction: column;
  }
  .chat-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: min(2.857rem,2.083vw);
    padding: 0 min(1.143rem,0.833vw);
    color: #dfdfdf;
    font-size: 1.071rem;
    font-weight: 700;
    text-align: center;
  }
  .chat-preview-content {
    overflow: auto;
  }
}
</style>
